<template>
  <div class='container'>
    <el-card>
         <!-- 表单 -->
    <el-form label-width="80px">
        <el-row>
            <el-col :span="6">
                <el-form-item label="关键字" >
                    <el-input v-model="page.keyword" placeholder="根据文章标题搜索"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="状态" >
                    <el-select v-model="page.state" placeholder="请选择活动区域" >
                        <el-option label="启用" value="1"></el-option>
                        <el-option label="禁用" value="0" ></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                    <el-button @click="cleanBtn">清除</el-button>
                    <el-button size="small" type="primary" @click="searchBtn" >搜索</el-button>
            </el-col>
            <el-col :span="6" class="newAdd" >
                <el-form-item >
                   <el-button type="success" @click="addShow = !addShow" >
                    <i class="el-icon-edit" ></i>
                    新增技巧
                   </el-button>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
    <el-row class="midle">
        <el-col>
            <i class="el-icon-info"></i>
            <span>数据一共{{counts}}条</span>
        </el-col>
    </el-row>
    <!-- 表格 -->
    <el-table :data="tableList">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="title" label="文章标题"></el-table-column>
        <el-table-column prop="visits" label="阅读数"></el-table-column>
        <el-table-column prop="username" label="录入人"></el-table-column>
        <el-table-column prop="createTime" label="录入时间">
            <template v-slot="{row}">
                {{row.createTime | parseTime}}
            </template>
        </el-table-column>

        <el-table-column prop="state" label="状态" >
            <template v-slot="{row}">
                {{row.state === 1 ? '已启用' : '已禁用'}}
            </template>
        </el-table-column>

        <el-table-column label="操作">
            <template v-slot="{row}" >
                <el-col :span="6">
                    <el-button type="text" @click="previewBtn(row)">预览</el-button>
                </el-col>
                <el-col :span="6">
                    <el-button type="text" @click="changeState(row)">
                        {{row.state === 1 ? "禁用" : "启用"}}
                    </el-button>
                </el-col>
                <el-col :span="6">
                <el-button type="text" :disabled="row.state === 1" @click="recompose(row)">修改</el-button>
                </el-col>
                <el-col :span="6">
                    <el-button type="text" :disabled="row.state === 1" @click="remove(row)">删除</el-button>
                </el-col>
            </template>

        </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-row type="flex" justify="end" >
        <el-pagination
         background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[2, 3, 5, 10]"
        :page-size="10"
        layout="prev, pager, next, sizes, jumper"
        :total="counts">
        </el-pagination>
    </el-row>
    </el-card>
    <!-- 修改 -->
    <articlesDialog :showDialog.sync="showDialog" :alterList.sync="alterList"></articlesDialog>
    <!-- 预览 -->
    <articles-preview :showPreview.sync="showPreview" :previewList.sync="previewList" ></articles-preview>
    <!-- 新增 -->
    <articlesAdd :addShow.sync="addShow"></articlesAdd>
  </div>
</template>

<script>
import baseApi from '../../api/base/baseApi'
import { list, remove, changeState, detail } from '../../api/hmmm/articles'
import articlesAdd from '../components/articles-add.vue'
import articlesDialog from '../components/articles-dialog.vue'
import articlesPreview from '../components/articles-preview.vue'
export default {
  components: {
    articlesDialog,
    articlesPreview,
    articlesAdd
  },
  data () {
    return {
      page: {
        page: 1,
        pagesize: 10,
        keyword: '',
        state: null // 状态一定要为空null ，意想不到的错误
      },
      tableList: [],
      //   obj: {},
      counts: 0,
      value: '',
      showDialog: false, // 修改编辑
      addShow: false,
      disable: true,
      showPreview: false, // 预览
      previewList: {}, // 预览回显
      alterList: {
        title: '',
        articleBody: '',
        videoURL: '',
        id: ''
      } // 修改回显
    }
  },
  created () {
    this.list()
  },
  methods: {
    // 列表数据
    async list () {
      const { data } = await list(this.page)
      console.log(data)
      this.tableList = data.items
      this.counts = data.counts
      //   this.obj = { ...this.tableList }展开运算符 把 数组变为对象
    },
    // 清空输入框
    cleanBtn () {
      this.page.keyword = ''
      this.page.state = null
      this.list()
    },
    // 搜索
    async searchBtn () {
    //   this.page.page = 1
    //   this.page.pagesize = 10
      this.list()
    },
    // 表格formatter属性,过滤
    tableBtn (row, column, cellValue, index) {
    //   return cellValue
      const obj = baseApi.status.find(item => item.id === String(cellValue))
      return obj ? obj.value : ''
    },
    // 操作 启用&禁用
    async changeState (data) {
      // 赋值是因为要取相反的值
      data.state === 0 ? data.state = 1 : data.state = 0
      try {
        await changeState(data)
        await this.$message.success('操作成功')
      } catch (error) {
        console.log(error)
      }
    },
    // 删除
    async remove (data) {
    //   console.log(data)
      await this.$confirm('确定要删除吗')
      await remove(data)
      this.list()
    },
    // 修改
    async recompose (data) {
      const res = await detail(data)
      console.log(res.data)
      this.alterList = res.data
      this.showDialog = true
    },
    // 预览detail接口
    previewBtn (data) {
      // 直接将点击的数据赋值给个空对象
    //   console.log(data)
      this.previewList = data
      this.showPreview = true
    },
    // 分页--每页条数
    handleSizeChange (val) {
    //   console.log(`每页 ${val} 条`)
      this.page.pagesize = val
      this.list()
    },
    // 分页--第几页
    handleCurrentChange (val) {
    //   console.log(`当前页: ${val}`)
      this.page.page = val
      this.list()
    }
  }
}
</script>

<style scoped lang='scss'>
.newAdd{
    display: flex;
    justify-content: flex-end;
}

.midle{
    background: #f0eaea;
    padding-left: 10px;
}
</style>
